<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header" v-if="!show">
      <van-nav-bar title="题库选择" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    </div>
    <!-- 搜索区域开始 -->
    <div>
      <van-search
        v-model="value"
        show-action
        @blur="find(value)"
        shape="round"
        placeholder="请输入题库名称关键词"
        @cancel="onCancel"
      />
      <!-- <van-search v-model="value" @blur="find(value)" shape="round" placeholder="请输入题库名称关键词" /> -->
    </div>
    <!-- 搜索区域结束 -->

    <div v-if="!show" class="middle">
      <!-- 左边 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in list1"
            :key="item.id"
            :title="item.name"
            @click="jump(item.id)"
          />
        </van-sidebar>
      </div>

      <!-- 右边内容 -->
      <div class="right">
        <div class="small" v-for="item in list2" :key="item.id" :class="{active:index==isActive}">
          <p>{{item.name}}</p>
          <div class="mini" v-for="i in item.bank" :key="i.id" @click='tiao'>{{i.name}}</div>
        </div>
      </div>
    </div>
    <div v-show="show && isShow" v-for="item in array" :key="item.id" class="list">{{item.name}}</div>
    <div v-if="!isShow"><van-empty image="search" description="没有搜索到相关内容" /></div>
  </div>
</template>

<script>
import { cyjleft, cyjright, cyjsou } from "../../utils/http";
// import sou from '../Practice/sou'
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      list1: [],
      list2: [],

      isActive: 0,
      array: [],
      index: [],
      show: false, // 头部加内容
      isShow: -1 //没有数据 为空
    };
  },
  created() {},
  mounted() {
    this.getleft();
    this.getRight();
  },
  methods: {
    //表头返回
    onClickLeft() {
      this.$router.push("/point");
    },
    async getleft() {
      cyjleft().then(res => {
        console.log(res);
        this.list1 = res;
      });
    },

    //获取右侧内容
    async getRight() {
      //   // console.log(res);
      const res = await cyjright();
      this.list2 = res;
    },

    async jump(id) {
      console.log(id);
      //获取左侧内容
      const res = await cyjright(id);
      console.log(res);
      this.list2 = res;
    },

    //搜索
    async find(value) {
      const res = await cyjsou(value);
      console.log(res);
      this.show = true;
      //找不到数据
      if (res.length == 0) {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.array = res;
      }
    },
    //取消
    onCancel() {
      this.isShow = true;
      this.show = false;
    },
    tiao(){
      this.$router.push('/point')
    }
  }
};
</script>

<style lang='scss' scoped>
#app {
  width: 100%;
  height: 100%;
  .header {
    height: 10%;
  }
  .middle {
    display: flex;

    .left {
      width: 25%;
      height: 90%;
      overflow: scroll;
    }
    .right {
      width: 75%;
      height: 90%;
      overflow: scroll;
      .small {
        margin: 10px 0;
        p {
          font-size: 20px;
        }
        .mini {
          width: 120px;
          height: 40px;
          background: #ddd;
          text-align: center;
          line-height: 40px;
          margin: 5px 0;
          font-size:14px;
        }
      }
    }
  }
}
.list {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 2px solid #ddd;
}
</style>
